<template>
  <div class="regis_container">
    <div class="regis">
      <h3>梓晨电影院</h3>
      <el-form ref="regisForm" :model="regisForm" :rules="regisRules" status-icon>
        <el-form-item prop="memberName">
          <el-input placeholder="请输入用户账号" prefix-icon="el-icon-user" v-model="regisForm.memberName" clearable></el-input>
        </el-form-item>
        <el-form-item prop="memberPhone">
          <el-input v-model="regisForm.memberPhone" placeholder="请输入手机号" prefix-icon="el-icon-phone"></el-input>
        </el-form-item>
        <el-form-item prop="memberPassword">
          <el-input type="password" show-password placeholder="请输入密码" prefix-icon="el-icon-lock" v-model="regisForm.memberPassword" clearable></el-input>
        </el-form-item>
         <el-form-item prop="confirmPassword">
          <el-input type="password" show-password placeholder="再次输入密码" prefix-icon="el-icon-lock" v-model="regisForm.confirmPassword" clearable></el-input>
        </el-form-item>
      </el-form>
      <el-button type="primary" @click="register">注册</el-button>

    </div>
  </div>
</template>

<script>
import SIdentify from '../components/identify'
export default {
  data() {
      var confirmPass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.regisForm.memberPassword) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
    return {
      regisForm:{
        memberName:'',
        memberPassword:'',
        confirmPassword:''
      },
      confirmPassword:'',
      regisRules:{
        memberName:[
          {required:true,message:"请输入用户名",trigger:"blur" },
          {min:3,max:10,message:"长度在3-10个字符之间",trigger:"blur"}
          ],
        memberPassword:[
          {required:true,message:"请输入密码",trigger:"blur" },
        ],
        confirmPassword:[
            {validator:confirmPass,trigger:'blur'},
        ],
        memberPhone:[
          {required:true,message:"请输入手机号",trigger:"blur"}
        ]
      }
    };
  },
  methods:{
    register(){
      this.$refs.regisForm.validate(async valid=>{
        if(!valid){
          return
        }
        else{
          const {data:res} = await this.$http.post("/member/member/addMember",this.regisForm)
          if(res.code != 200){
            console.log(res)
            return this.$message.error("用户名或密码错误")
          }
          else{
            console.log(res.data)
                 this.$message.success("注册成功")
                this.$router.push('/login')
            }
           
           
          
        }
      })
    },
 
    



  }





};
</script>

<!-- scoped表示样式只在当前组件生效 -->
<style lang="less" scoped>
.regis_container {
  height: 100%;
  
   background: url(../assets/image/back.jpg);
   background-size: 100% 100%;

  .regis {
    width: 300px;
    height: 425px;
    position: fixed;
    background-color: white;
    right: 100px;
    top: 10%;
    padding: 50px 75px;

    h3 {
      text-align: center;
      letter-spacing: 5px;
      color: #2d9aef;
      font-size: 24px;
    }

  /deep/ .el-input__inner {
    border: 0;
    border-radius: 0;
    border-bottom: 1px solid;
    
  }

  .el-form-item{
    margin-top: 50px;
  }
  }


  .el-button {
    width: 100%;
    color: white;
    letter-spacing: 1em;
  }

  .role{
    margin-bottom: 10px;
    margin-top: 35px;
  }

  .toRegister{
    font-size: 15px;
    float: right;
    margin-top: -14px;
    margin-bottom: 10px;
  }
}
</style>
